<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
    <p style="background:red;color:green;">大连交通大学</p>
    <!--  字符串  -->
    <p :style="one">大连海洋大学</p>
    <p :style="'background:green;'">大连学院</p>
    <p :style='one'>大连科技学院</p>
    <p :style=one>大连理工大学</p>
    <p :style='"background:pink"'>大连海事大学</p>
    <!--  对象  -->
    <p :style="{background:'red',color:'green',fontSize:'30px'}">辽宁师范大学</p>
    <p :style="obj">辽宁民族大学</p>

    <!--  数组  -->
    <p :style="[{color:'red'},{background:'green'}]">大连外国语大学</p>
    <p :style="arr">大连东软信息学院</p>
    <p :style="[obj,obj2]">东北财经大学</p>
    <p :style="[...arr,obj2]">大连医科大学</p>
</div>
</body>
<script>
	new Vue({
		el:"#root",
        data:{
			one:"background:yellow;color:red;",
            obj:{
				color:"green",
                background:"yellow"
            },
            obj2:{
				fontSize:"40px"
            },
            arr:[
				{
					background:"yellow"
                },{
				    color:"green"
                }
            ]
        }
	})
</script>
</html>